<template>
    <div class="flight-item">
        <div>
            <!-- 显示的机票信息 -->
            <!--显示机票信息：1、绑定事件的语法补充：v-on:事件名='表达式'，v-on可简写@
            2、.native修饰符，作用增强事件的功能（使得组件拥有原生js的事件）
            比如a标签 默认点击可以跳转页面，但当我们有一个需求点击标签的上海不需要跳转，
            我们可以通过阻止默认事件的来实现这个功能 e.oreventDefault()
            在vue中为了简化这种原生js的写法，创造了修饰符语法，.prevent来实现
            
            原生html标签有原生js事件 elementui组件没有，使用得让他有原生js-->
            <el-row @click.native="isshow = !isshow" type="flex" align="middle" class="flight-info">
                <el-col :span="6">
                    <span>{{ data.airline_name }} </span> {{ data.flight_no }}
                </el-col>
                <el-col :span="12">
                    <el-row type="flex" justify="space-between" class="flight-info-center">
                        <el-col :span="8" class="flight-airport">
                            <strong>{{ data.dep_time }}</strong>
                            <span>{{ data.org_airport_name }}{{ data.org_airport_quay }}</span>
                        </el-col>
                        <el-col :span="8" class="flight-time">
                            <span>{{ rankTime }}</span>
                        </el-col>
                        <el-col :span="8" class="flight-airport">
                            <strong>{{ data.arr_time }}</strong>
                            <span>{{ data.dst_airport_name }}{{ data.dst_airport_quay }}</span>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="6" class="flight-info-right">
                    ￥<span class="sell-price">{{ data.seat_infos[0].org_settle_price }}</span>起
                </el-col>
            </el-row>
        </div>
        <div class="flight-recommend">
            <!-- 隐藏的座位信息列表 -->
            <el-row v-show="isshow" type="flex" justify="space-between" align="middle">
                <el-col :span="4">低价推荐</el-col>
                <el-col :span="20">
                    <el-row v-for="(item, index) in data.seat_infos" :key="index" type="flex" justify="space-between"
                        align="middle" class="flight-sell">
                        <el-col :span="16" class="flight-sell-left">
                            <span>{{ item.name }}</span> | {{ item.supplierName }}
                        </el-col>
                        <el-col :span="5" class="price">
                            ￥{{ item.org_settle_price }}
                        </el-col>
                        <el-col :span="3" class="choose-button">
                            <el-button type="warning" size="mini" @click="handleToOrder(item)">
                                选定
                            </el-button>
                            <p>剩余：{{ item.discount }}</p>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
            <!--分页-->
        </div>
    </div>
</template>

<script>
export default {
    computed: {
        // 计算出相差时间
        rankTime() {
            // 转化为分钟
            const dep = this.data.dep_time.split(":");
            const arr = this.data.arr_time.split(":");
            const depVal = dep[0] * 60 + +dep[1];
            const arrVal = arr[0] * 60 + +arr[1];

            // 到达时间相减得到分钟
            let dis = arrVal - depVal;

            // 如果是第二天凌晨时间段，需要加24小时
            if (dis < 0) {
                dis = arrVal + 24 * 60 - depVal;
            }

            // 得到相差时间
            return `${Math.floor(dis / 60)}时${dis % 60}分`
        }
    },
    data() {
        return {
            isshow: false,
        }
    },
    methods: {
        // 跳转到订单
        handleToOrder(item){
            // 跳转到订单页，航班的id，座位id
            this.$router.push({
                path: "/air/order",
                query: {
                    id: this.data.id,
                    seat_xid: item.seat_xid
                }
            })
            console.log(this.data)
        }
    },
    mounted() {
        console.log(this.$route.query)
    },
    props: {
        // 数据
        data: {
            type: Object,
            // 默认是空数组
            default: () => ({})
            // default: ()=>(
            //     return { }
            //     )
        }
    }
}
</script>

<style scoped lang="less">
.flight-item {
    border: 1px #ddd solid;
    margin-bottom: 10px;

    .flight-info {
        padding: 15px;
        cursor: pointer;

        >div {

            &:first-child,
            &:last-child {
                text-align: center;
            }
        }
    }

    .flight-info-center {
        padding: 0 30px;
        text-align: center;

        .flight-airport {
            strong {
                display: block;
                font-size: 24px;
                font-weight: normal;
            }

            span {
                font-size: 12px;
                color: #999;
            }
        }

        .flight-time {
            span {
                display: inline-block;
                padding: 10px 0;
                border-bottom: 1px #eee solid;
                color: #999;
            }
        }
    }

    .flight-info-right {

        .sell-price {
            font-size: 24px;
            color: orange;
            margin: 0 2px;
        }
    }
}

.flight-recommend {
    background: #f6f6f6;
    border-top: 1px #eee solid;
    padding: 0 20px;

    .flight-sell {
        border-bottom: 1px #eee solid;
        padding: 10px 0;

        &:last-child {
            border-bottom: none;
        }

        .flight-sell-left {
            font-size: 12px;

            span {
                color: green;
            }
        }

        .price {
            font-size: 20px;
            color: orange;
        }

        .choose-button {
            text-align: center;
            color: #666;

            button {
                display: block;
                width: 100%;
                margin-bottom: 5px;
            }
        }
    }
}
</style>